 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
 </head>
 <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强'];
        var yDataArr_yuwen = [88,92,63,77,94,80,72,86];
        var yDataArr_shuxue = [93,60,61,62,85,79,92,30];
        var option = {
            title: {
                text: '成绩展示',
                textStyle: {
                    color:'red',
                },
                borderWidth:5,
                borderColor:'blue',
                borderRadius:10,
                left:'60',
                top:'20',
            },
            xAxis: {
                type: 'category',
                data: xDataArr,
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: '',
                type: 'bar',
                data: [88,92,63,77,94,80,72,86],
                color:'red',
            }],
            tooltip: {
                trigger:'axis', 
                triggerOn: 'mouseover|click',
                formatter: 'hello{}'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {},
                    dataView: {},
                    restore:{},
                    dataZoom:{},
                    magicType: {
                        type: ['line', 'bar']
                    }
                }
            },
            legend: {
                data: ['语文', '数学'],  
            },
            series: [{ 
                name: '语文',
                type: 'bar',
                data: yDataArr_yuwen,
                }, 
                {
                name: '数学',
                type: 'bar',
                data: yDataArr_shuxue,
                }
            ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    
 </body>
 </html>